<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery推送列表滚动</title>
	</head>
	<style>
		body,html{
			width: 100%;
			height: 100%;
		}
		.list_box{
			width: 400px;
			height: 500px;
			border: 1px solid beige;
			margin-left: auto;
			margin-right: auto;
			background-color: #081926;
			color: white;
		}
		.PT_projectitem_list{
			width: 100%;
		}
		.foreign_thead tr {
			height: 40px;
		}
		.foreign_tbody tr{
			height: 40px;
		}
		.foreign_tbody tr td{
			text-align: center;
		}
		.active{
			height: 40px;
		animation:myfirst 1s;
		-moz-animation:myfirst 1s; /* Firefox */
		-webkit-animation:myfirst 1s; /* Safari and Chrome */
		}
	    .blockList li{

		}
		
		
		@keyframes myfirst
		{
		  from {
		  background: rgba(0,36,49,1);
		 height:0px;
		 opacity: 0;
		  
		  }
		 to {
		  height:40px;
		  opacity: 1;
		  background: rgba(0,36,49,1);
		  }
		
		}
		
		@-moz-keyframes myfirst /* Firefox */
		{
		 from {
		  background: rgba(0,36,49,1);
		  height:0px;
		  opacity: 0;
		  
		  }
		  to {
		background: rgba(0,36,49,1);
		  height:40px;
		 opacity: 1;
		  }
		}
		
		@-webkit-keyframes myfirst /* Safari and Chrome */
		{
		 from {
		background: rgba(0,36,49,1);
		  height:0px;
		 opacity: 0;
		  
		  }
		to {
		 background: rgba(0,36,49,1);
		 height:40px;
		 opacity: 1;
		  }
		}
	</style>
	<body>
		<div class="list_box">
		<table class="PT_projectitem_list">
				<thead class="foreign_thead">
					<tr>
						<th>
							<span>上路</span>
						</th>
						<th>
							<span>打野</span>
						</th>
						<th>
							<span>中路</span>
						</th>
						<th>
							<span>AD</span>
						</th>
						<th>
							<span>辅助</span>
						</th>
					</tr>
				</thead>
				<tbody class="foreign_tbody">
					<tr>
						<td>
							<span>the shy</span>
						</td>
						<td>
							<span>MLXG</span>
						</td>
						<td>
							<span>faker</span>
						</td>
						<td>
							<span>UZI</span>
						</td>
						<td>
							<span>ming</span>
						</td>
					</tr>
				</tbody>	
		</table>
		</div>
	</body>
</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
	
	setInterval(function(){
		var	str =
		           `<tr class="active">
						<td>
							<span>the shy</span>
						</td>
						<td>
							<span>MLXG</span>
						</td>
						<td>
							<span>faker</span>
						</td>
						<td>
							<span>UZI</span>
						</td>
						<td>
							<span>ming</span>
						</td>
					</tr>`;
		
			$(".foreign_tbody").prepend(str);
	},1000)
</script>